<template>
  <div>
    <ul class="topTypenav">
      <li
        v-for="item in TypeData"
        :key="item.id"
        @click="getTypeData(item.tagid)"
        :class="{ typeSelect: typeid === item.tagid }"
      >
        {{ item.tagname }}
      </li>
    </ul>

    <el-card class="box-card" v-for="item in blogData" :key="item.id">
      <router-link :to="'/detail/' + item.id">
        <h2>{{ item.title }}</h2>
        <div class="clearfix">
          <div class="img_intr">
            <img :src="stati + item.img" alt="" />
          </div>
          <p class="intro">{{ item.introduction }}</p>
        </div>
        <div class="flooter_content">
          <ul>
            <li>
              <span class="iconfont icon-yueduliang"></span>
              <p>{{ item.read_ }}</p>
            </li>
            <li>
              <span class="iconfont icon-fenlei"></span>
              <p>{{ BLOG_TYPE[item.blog_type] }}</p>
            </li>
            <li>
              <span class="iconfont icon-biaoqian"> </span>
              <p>{{ Tag[item.blog_tag] }}</p>
            </li>
            <li>
              <span class="iconfont icon-zuozhe"></span>
              <p>{{ item.author }}</p>
            </li>
            <li>
              <span class="iconfont icon-fabushijian"></span>
              <p>{{ item.create_time }}</p>
            </li>
          </ul>
        </div>
      </router-link>
    </el-card>
    <!-- <p v-if="loading">加载中...</p>
    <p v-else>没有更多了</p> -->
  </div>
</template>

<script>
import { getTagBlog, gettypetag } from "../../api/serve";
import { stati } from "../../api/api";
export default {
  name: "tag",
  props: ["id"],
  data() {
    return {
      TypeData: [],
      // blogtypeid: "D1DC83DE-82DD-4375-950B-9FB067BD7424",
      blogData: [],
      typeid: "214a880e3d954228bd87b909bdfae29f",
      stati,
      BLOG_TYPE: {
        "D1DC83DE-82DD-4375-950B-9FB067BD7424": "前端",
        "3A0BD8AB62084D9FA21B3FC8618233FD": "后端",
      },
      Tag: [],
    };
  },
  watch: {
    typeid: function (id) {
      this.init(id);
    },
  },
  mounted() {
    const { id } = this.$route.params;
    if (id) {
      this.typeid = id;
    }

    this.init(this.typeid);
  },
  methods: {
    getTypeData(id) {
      this.typeid = id;
      getTagBlog({ id: id }, (res) => {
        this.blogData = res.data;
      });
    },
    init(id) {
      getTagBlog({ id: id }, (res) => {
        this.blogData = res.data;
      });
      // 获取标签
      gettypetag((res) => {
        let data = res.data;
        this.TypeData = data;
        this.tagTotal = data.length;
        this.TagData = data;
        let dataTag = {};
        data.forEach(function (item) {
          dataTag[item.tagid] = item.tagname;
        });
        this.Tag = dataTag;
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.flooter_content {
  ul {
    display: flex;
    li {
      display: flex;
      align-items: center;
      margin-left: 25px;
      margin-top: 20px;
      p {
        margin-left: 5px;
      }
    }
    // & > li:nth-child(1) {
    //   margin-left: 0;
    // }
  }
}
.typeSelect {
  background-color: #80c8f8;
  border: none;
}
.topTypenav {
  width: 100%;
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;

  li {
    box-sizing: border-box;
    width: 100px;
    height: 45px;
    display: inline-block;
    text-align: center;
    line-height: 45px;
    margin-right: 20px;
    border: 2px solid #ccc;
    transition: all 0.3s linear;
    cursor: pointer;
    margin-bottom: 10px;
  }
  li:hover {
    background-color: #80c8f8;
    border: none;
    color: #fff;
  }
}
.box-card:hover .img_intr img {
  transform: scale(1.1, 1.1);
}
.box-card:hover {
  z-index: 2;
  -webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -5px, 0);
}
.box-card {
  width: 100%;
  box-shadow: 0 -11px -26px 0 rgb(0 0 0 / 10%);
  margin-bottom: 20px;
  cursor: pointer;
  h2 {
    margin-left: 10px;
    margin-bottom: 10px;
  }
  .img_intr {
    float: left;
    margin-right: 10px;
    overflow: hidden;
    img {
      width: 368px;
      height: 200px;
      transform: scale(1, 1);
      transition: all 0.3s ease-in-out;
    }
  }
  .intro {
    line-height: 24px;
  }
}
</style>
